﻿<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <title>Ember.js • TodoMVC</title>
    <link rel="stylesheet" href="_css/style.css">
</head>
<body>
    <script type="text/x-handlebars" data-template-name="todos">

    <section id="todoapp">
        <header id="header">
            <h1>todos</h1>
            {{view Ember.TextField id="new-todo" placeholder="What needs to be done?"
                valueBinding="newTitle" action="createTodo"}}
        </header>

        <section id="main">
            {{outlet}}

            {{view Ember.Checkbox id="toggle-all" checkedBinding="allAreDone"}}
        </section>

        <footer id="footer">
            <span id="todo-count">
                <strong>{{remaining}}</strong> {{inflection}} left
            </span>
            <ul id="filters">
                <li>
                    {{#linkTo 'todos.index' activeClass="selected"}}All{{/linkTo}}
                </li>
                <li>
                    {{#linkTo 'todos.active' activeClass="selected"}}Active{{/linkTo}}
                </li>
                <li>
                    {{#linkTo 'todos.completed' activeClass="selected"}}Completed{{/linkTo}}
                </li>
            </ul>

            {{#if hasCompleted}}
                <button id="clear-completed" {{action "clearCompleted"}}>
                    Clear completed ({{completed}})
                </button>
            {{/if}}
        </footer>
    </section>

    <footer id="info">
        <p>Double-click to edit a todo</p>
    </footer>

    </script>

    <script type="text/x-handlebars" data-template-name="todos/index">
        <ul id="todo-list">
            {{#each controller itemController="todo"}}
            <li {{bindAttr class="isCompleted:completed isEditing:editing"}}>
                {{#if isEditing}}
                    {{view Todos.EditTodoView valueBinding="title"}}
                {{else}}
                    {{view Ember.Checkbox checkedBinding="isCompleted" class="toggle"}}
                    <label {{action "editTodo" on="doubleClick"}}>{{title}}</label>
                    <button {{action "removeTodo"}} class="destroy"></button>
                {{/if}}
            </li>
            {{/each}}
        </ul>
    </script>


    <script src="/javascript/jquery-2.0.3.min.js"></script>
    <script src="/javascript/ember/handlebars.js"></script>
    <script src="/javascript/ember/ember.min.js"></script>
    <script src="/javascript/ember/ember-data.js"></script>
    <script src="/javascript/ember/localstorage_adapter.js"></script>

    <script src="_js/application.js"></script>
    <script src="_js/router.js"></script>
    <script src="_js/models/store.js"></script>
    <script src="_js/models/todo.js"></script>
    <script src="_js/controllers/todos_controller.js"></script>
    <script src="_js/controllers/todo_controller.js"></script>
    <script src="_js/views/edit_todo_view.js"></script>
</body>
</html>
